<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>楼盘详情</title>

		<script src="../js/jquery-1.12.4.js"></script>
		<script src="../layui/layui.js"></script>
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../css/floatmuen.css"/>
		<link rel="stylesheet" type="text/css" href="../css/pub_head.css"/>
		<link rel="stylesheet" type="text/css" href="../css/pub_footer.css"/>
		<link rel="stylesheet" href="../css/navigation.css">
		<link rel="stylesheet" href="../css/properties/proNav.css">
		<link rel="stylesheet" href="../css/properties/Housing_details.css">

		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=kwKWiw65Q3LdHE6ZIIGyU3DTGSRoYF5G"></script>
	</head>
	<body>
		<ul id="floatMul"></ul>
		<div id="head" th:include="../static/publichtml/public_pageHead :: footer1"></div><!-- 头部导入 -->
		<div id="navigation"></div>
		<div id="proNav"></div>
		<div id="flats">
			<div id="flats_left">
				<h2 id="basic_information_h2">基本情况</h2>
				<div id="basic_information">
					<table class="basic_information_table">
						<tr>
							<td>楼盘名称</td>
							<td th:text="${session.p.name}">保利堂悦</td>
						</tr>
						<tr>
							<td>参考均价</td>
							<td>
								<span th:text="${session.p.price}">8700</span>元/m²
								<span th:text="${session.p.describe}">沙市二中旁 约85-166㎡交付在即 限量毛坯7XXX元/㎡起，精装8XXX元/㎡</span>
							</td>
						</tr>
						<tr>
							<td>开发商</td>
							<td th:text="${session.p.deceloper}">荆州保利金图置业有限公司</td>
						</tr>
						<tr>
							<td>售楼处地址</td>
							<td th:text="${session.p.salesAdd}"></td>
						</tr>
						<tr>
							<td>楼盘地址</td>
							<td>
								<span th:text="${session.p.propertiesAdd}"></span>
								<span><a style="color: #007DDB;" class="find">查看【<span>保利堂悦</span>】地图</a></span>
							</td>
						</tr>
						<tr>
							<td>售楼处电话</td>
							<td>
								<h3 style="color: red; display: inline-block;" th:text="${session.p.salesPhone}">400-600-0716</h3>
							</td>
						</tr>
					</table>
				</div>
				<h2 id="Community_is_h2">小区情况</h2>
				<div id="Community_is">
					<table class="basic_information_table">
						<tr>
							<td>物业类型</td>
							<td>物业类型待更新</td>
						</tr>
						<tr>
							<td>工程进度</td>
							<td>工程进度待更新</td>
						</tr>
						<tr>
							<td>交房标准</td>
							<td>精装修</td>
						</tr>
						<tr>
							<td>投资商</td>
							<td th:text="${session.p.name}"></td>
						</tr>
						<tr>
							<td>周边配套</td>
							<td>
								<span><a style="color: #007DDB;" class="find">查看【<span th:text="${session.p.name}"></span>】地图</a></span>
							</td>
						</tr>
						<tr>
							<td>营销公司</td>
							<td>营销公司待更新</td>
						</tr>
					</table>
				</div>
				<h2 id="district_planning_h2">小区规划</h2>
				<div id="district_planning">
					<table class="basic_information_table">
						<tr>
							<td>容积率</td>
							<td th:text="${session.p.village.plotRatio}">4.5</td>
						</tr>
						<tr>
							<td>绿化率</td>
							<td th:text="${session.p.village.greening}"></td>
						</tr>
						<tr>
							<td>建筑面积</td>
							<td><span th:text="${session.p.village.builtArea}"></span>m2</td>
						</tr>
						<tr>
							<td>占地面积</td>
							<td><span th:text="${session.p.village.landArea}"></span>m2</td>
						</tr>
						<tr>
							<td>停车位</td>
							<td th:text="${session.p.village.parking}">停车位待更新</td>
						</tr>
						<tr>
							<td>总户数</td>
							<td th:text="${session.p.village.totalPeople}">总户数待更新</td>
						</tr>
						<tr>
							<td>物业公司</td>
							<td th:text="${session.p.village.propertyCpy}">物业待更新</td>
						</tr>
						<tr>
							<td>物业费</td>
							<td th:text="${session.p.village.propertyFee}">物业费待更新</td>
						</tr>
						<tr>
							<td>物业描述</td>
							<td>物业描述待更新</td>
						</tr>
						<tr>
							<td>楼层状况</td>
							<td>楼层状况待更新</td>
						</tr>
					</table>
				</div>
				<h2 id="project_introduction_h2">项目介绍</h2>
				<div id="project_introduction" th:text="${session.p.introduce}">

				</div>

			</div>
			<div id="flats_right">
				<div id="Map_supporting_information">
					<br>
					<div style="width:258px;margin: 0px auto;height:152px;border:#ccc solid 1px;font-size:12px"
						id="map"></div>
					<div style="margin-top: 15px; margin-left: 15px;"><a style="color: red;">更多配套信息 > ></a></div>
				</div>
				<div id="phone_number">
					<div id="phone_number_service"><i style="font-size: 25px;" class="layui-icon layui-icon-service">
							400-600-0716</i></div>
					<div id="phone_number_detail">
						您可以拨打保利堂悦售楼处电话进行咨询，
						本页面信息由荆州好房子网搜集，
						<br>具体信息以售楼处公布的信息为准。
					</div>
				</div>
				<h2 id="Surrounding_buildings_h2">周边楼盘</h2>
				<div id="Surrounding_buildings">
					<table id="Surrounding_buildings_table">
						<tr th:each="p:${prozblist}">
							<td><a style="width: 100px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" th:href="@{'pro1?id='+${p.id}}" th:text="${p.name}">丰景园</a></td>
							<td><span th:text="${p.area}"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span th:text="${p.price==null?'待定':p.price}"></span></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div id="footer"></div>
		<script th:inline="javascript">
			var p = /*[[${session.p}]]*/ {};
			$(function() {
				$("#floatMul").load("../../publichtml/floatMune.html");
				//$("#head").load("../../publichtml/public_pageHead.html");
				$("#footer").load("../../publichtml/pub_footer.html");
				$("#navigation").load("../publichtml/navigation2.html");
				$("#footer").load("../publichtml/pub_footer.html");
				$("#proNav").load("../../publichtml/proNav.html",function(){
					$(".proNav_ul>li").removeClass("proNav_ul_click").eq(1).addClass("proNav_ul_click");
					$(".proTitle").text(p.name);
					$(".proStatus").text(p.status);
					var spanC='';
					$.each(p.chapros,function (i,d){
						spanC+="<span class='proCha'>"+d.characteristic.name+"</span>";
					})
					$(".proNav_title_d1_d2").html(spanC);
				});
			})
			$(".find").hover(function() {
				$(this).css("color", "red");
			}, function() {
				$(this).css("color", "#007DDB")
			})

			$(".propertyA").hover(function() {
				$(this).css("color", "red");
			}, function() {
				$(this).css("color", "#000")
			});
			var mAddress = /*[[${mapAddress}]]*/ {};
			function initMap(){
				createMap();//创建地图
				setMapEvent();//设置地图事件
				addMapControl();//向地图添加控件
				addMapOverlay();//向地图添加覆盖物
			}
			function createMap(){
				map = new BMap.Map("map");
				if(mAddress.lng==null){return ;}
				map.centerAndZoom(new BMap.Point(mAddress.lng,mAddress.lat),14);
			}
			function setMapEvent(){
				map.enableScrollWheelZoom();
				map.enableKeyboard();
				map.enableDragging();
				map.enableDoubleClickZoom()
			}
			function addClickHandler(target,window){
				target.addEventListener("click",function(){
					target.openInfoWindow(window);
				});
			}
			function addMapOverlay(){
				var markers = [
					{content:p.name,title:p.name,imageOffset: {width:-46,height:-21},lat:mAddress.lat,lng:mAddress.lng},
				];
				for(var index = 0; index < markers.length; index++ ){
					var point = new BMap.Point(markers[index].lng,markers[index].lat);//设置标签位置
					var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
							imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
						})});
					var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(35,5)});
					var opts = {
						width: 20,
						title: markers[index].title,
						enableMessage: true
					};
					var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
					//marker.setLabel(label);
					addClickHandler(marker,infoWindow);
					map.addOverlay(marker);
				};
			}
			//向地图添加控件
			function addMapControl(){
			}
			var map;
			initMap();

		</script>
	</body>
</html>
